1
00:00:00,750 --> 00:00:01,350
Hello.

2
00:00:01,380 --> 00:00:12,750
In this lecture we are going to create a structure for app use in hastier mail to save time.

3
00:00:12,750 --> 00:00:14,890
I've already added the code.

4
00:00:14,910 --> 00:00:18,020
I will just step to the cord with you.

5
00:00:18,370 --> 00:00:28,110
And one of the code is the doctype the doctype is used to notify web browsers and search engines that

6
00:00:28,110 --> 00:00:35,640
the content of the page that's about to be displayed is an hastier mail five document household a dog

7
00:00:35,650 --> 00:00:43,770
doctype does to provide information that the content is and hastier Mail 5 the actual eight year old

8
00:00:43,770 --> 00:00:47,760
documents from line to an ends online.

9
00:00:47,760 --> 00:00:58,410
Thirty three if he kicked the code also is also indented so that you can tell the parent child relationship

10
00:00:58,420 --> 00:01:06,450
so look in because you can tell that the head tag which starts on line 3 aren't online.

11
00:01:06,450 --> 00:01:15,450
It is a child of the hastier male tag and the body starts on online 10 and ends online.

12
00:01:15,450 --> 00:01:20,860
31 is also a child of the hastier male TAC.

13
00:01:20,910 --> 00:01:24,900
The head has got child elements as well.

14
00:01:24,930 --> 00:01:29,610
The body also has caught several charred elements.

15
00:01:29,820 --> 00:01:36,820
So let's start from the head the head tag starts on line 3 and on line 8.

16
00:01:36,840 --> 00:01:48,920
It contains a couple of metter tax metter tags are snippets of text that describes a page content.

17
00:01:49,080 --> 00:01:53,880
The metal tags do not appear when the pages display.

18
00:01:53,880 --> 00:01:57,510
They just use for information purposes.

19
00:01:57,720 --> 00:02:06,830
The Met a tag online for us called an attribute called Cast set with a value of utf Dash 8.

20
00:02:06,900 --> 00:02:11,730
This is the encoding type for the web page.

21
00:02:11,910 --> 00:02:16,690
And is a standard encoding used by most web pages all over the world.

22
00:02:16,870 --> 00:02:25,740
Line 5 the metal tag has also got another troop whose code name with a value or viewport viewport refers

23
00:02:25,740 --> 00:02:27,980
to the screen size.

24
00:02:28,190 --> 00:02:35,600
But Conte has also gone no attributes caught content would be a value of if it was the vice minus weep

25
00:02:36,030 --> 00:02:38,630
comma initial that skill.

26
00:02:40,350 --> 00:02:43,130
The viewport on line 6.

27
00:02:43,130 --> 00:02:47,440
The attribute name which has a value view put the viewport.

28
00:02:47,450 --> 00:02:53,780
Basically it's like virtual area used by browser to render.

29
00:02:54,080 --> 00:03:01,640
Okay use that as a browser for rendering too and is used to determine how the content is skilled and

30
00:03:01,640 --> 00:03:02,670
size.

31
00:03:02,840 --> 00:03:11,580
Okay so when it is initially rendered on the current screen it has an initial skill of this one.

32
00:03:11,720 --> 00:03:12,100
Okay.

33
00:03:12,110 --> 00:03:19,790
And then you can you can zoom in and zoom up later.

34
00:03:19,820 --> 00:03:29,840
6 is the title for the game line 7 is a reference to the still more style sheet which is this one here

35
00:03:30,260 --> 00:03:38,230
that will use and line it ends the head section so the body starts from line 10 line 11.

36
00:03:38,240 --> 00:03:41,730
We've got a head tag for the body.

37
00:03:41,750 --> 00:03:49,480
This will be the title for that will appear on the page before the game.

38
00:03:49,580 --> 00:03:52,200
Line 12 and 13 hours.

39
00:03:52,220 --> 00:03:57,980
Just paragraph tags were some text to describe what the game is about.

40
00:03:58,110 --> 00:04:05,390
Line 14 is the break tag that will just create some space after the last paragraph tag line.

41
00:04:05,390 --> 00:04:13,550
15 is a div with an attribute of wrapper div will be the main contain a footy game.

42
00:04:13,550 --> 00:04:21,440
It will wrap all the all the contents for the game inside on line 16.

43
00:04:21,440 --> 00:04:25,870
We've got a div class called form.

44
00:04:26,150 --> 00:04:29,250
I actually remove that class.

45
00:04:29,600 --> 00:04:32,200
It's not really necessary.

46
00:04:33,010 --> 00:04:35,200
K does leave it like that.

47
00:04:35,210 --> 00:04:36,590
Do.

48
00:04:37,020 --> 00:04:41,450
Actually our lives that are lived are just have already pulled that they nuts so I'll leave that.

49
00:04:41,540 --> 00:04:50,990
So what a deep court class and Ballis form line 17 is a label just to give the input a name and I've

50
00:04:50,990 --> 00:04:58,640
got the label I.D. of guess component and I guess stassi attribute and then I've got unallowed tribute

51
00:04:58,640 --> 00:05:05,310
here called For am giving it a value of guess felt and this is a text.

52
00:05:05,310 --> 00:05:07,950
No or I really appear for that label.

53
00:05:08,100 --> 00:05:13,550
I am here with the label and then got an input type which is a text.

54
00:05:13,550 --> 00:05:19,050
This is where we'll input the numbers and we're giving it an idea of guess field.

55
00:05:19,070 --> 00:05:25,020
These ideas are very used for the ideas and class will be using the ideas later for success.

56
00:05:25,220 --> 00:05:32,030
And also Carol we can reference it with our javascript if need be noted we've got another class here

57
00:05:32,030 --> 00:05:33,500
called guess field.

58
00:05:33,710 --> 00:05:39,130
So the input I got on the input idea here with an attribute of sub.

59
00:05:39,620 --> 00:05:44,840
This will be used to submit the numbers once you've entered in your guess.

60
00:05:44,840 --> 00:05:52,520
You press submit saw the values submit guess we've given it a class of guests submit.

61
00:05:52,670 --> 00:06:04,080
Okay so that's what this Deve here contains And then we've got another Dave chord result paragraph I

62
00:06:04,180 --> 00:06:07,110
just named it the class subset.

63
00:06:07,130 --> 00:06:14,360
To result para when used setting classes and ideas is always good to name them to reflect what you want

64
00:06:14,360 --> 00:06:15,460
them to do.

65
00:06:15,710 --> 00:06:21,660
So this would be results in a resort paragraph above paragraphs of the results.

66
00:06:21,830 --> 00:06:29,570
Again I got a paragraph tag here with a class and guess this another p tag with a class last resort

67
00:06:29,780 --> 00:06:34,700
not a paragraph class in name of low or high.

68
00:06:34,700 --> 00:06:40,910
So when you make your guesses a paragraph with a paragraph will appear with a text telling you your

69
00:06:40,910 --> 00:06:43,610
guess is too low or you'll guess it's too high.

70
00:06:43,700 --> 00:06:46,260
So that's what all that is for.

71
00:06:46,260 --> 00:06:53,760
And we've got there now the end of the month the very end of the last day.

72
00:06:53,810 --> 00:07:00,740
After that Dave just before the closing body tag will insert our script.

73
00:07:00,740 --> 00:07:07,270
It's always good to put your script at the very bottom just before the close in body tag here.

74
00:07:07,340 --> 00:07:15,550
The reason for that is that it allows all the content of your web page to load completely before this

75
00:07:15,550 --> 00:07:17,620
script is executed.

76
00:07:17,760 --> 00:07:20,650
Alright that's the main reason so that's set.

77
00:07:20,810 --> 00:07:22,380
You'll save that.

78
00:07:22,650 --> 00:07:30,310
We are done with our structure so this is what the game look like after our hasty email.

79
00:07:30,560 --> 00:07:32,500
So we basically got this truck.

80
00:07:32,500 --> 00:07:38,050
Sure in some kind of order using hastier mail that's it for this lecture.

81
00:07:38,180 --> 00:07:38,840
Thanks for what.

82
00:07:39,400 --> 00:07:40,870
Bye for now.